<template>
	<view class="score" :class="{ 'low-score': score < 80 }">
		<zero-custom-bar :singleIcon="true" :title="type == 1 ? '本次练习情况' : '本次考试情况'" color="#fff"
			:singleIconType="'back'">
		</zero-custom-bar>
		<view class="score-box">
			<view class="round">
			</view>
			<view class="progress">
				<view class="progress-circle">
					<qiun-data-charts type="arcbar" :opts="getChartOpts" :chartData="chartData" />
				</view>
				<view class="score-num-box">
					<text class="num">{{ type == 1 ?passRate: score }}{{ type == 1 ? '%' : '分' }}</text>
					<text style="font-size: 22rpx; color: #666666;">{{ type == 1 ? '正确率' : '得分' }}</text>
					<text class="tips" style="font-size: 34rpx; font-weight: 600;">{{ scoreMessage }}</text>
					<text class="tips" style="font-size: 24rpx; color: #666666;">本次{{ type == 1 ? '练习' : '考试' }}时间:{{ duration }}</text>
				</view>
			</view>
			<view class="bingo-list">
				<view class="bingo-item">
					<text class="bingo-num" style="color: #2386FF;">{{ correct }}</text>
					<text>答对</text>
				</view>
				<!-- <view class="bingo-item" v-if="type == '1'">
					<text class="bingo-num" style="color: #cbcbcb;">{{ answered }}</text>
					<text>本次练习数</text>
				</view> -->
				<view class="bingo-item">
					<text class="bingo-num" style="color: #cbcbcb;">{{ total - correct - wrong }}</text>
					<text>未答</text>
				</view>
				<view class="bingo-item">
					<text class="bingo-num" style="color: #E23321FF;">{{ wrong }}</text>
					<text>答错</text>
				</view>
			</view>
			<template v-if="type != 1">
				<view class="score-look">
					<view class="score-look-txt">
						<text style="margin-bottom: 8rpx;font-weight: 500;">查看本次错题</text>
						<text>本次共错误 {{ wrong }} 道</text>
					</view>
					<view @click="goToReview" class="score-look-btn">
						<text>开始复习</text>
						<view class="triangle">推荐必看</view>
					</view>
				</view>
				<view class="score-share">
					<button class="score-share-box">
						<view class="iconfont icon-fenxiang">
						</view>
						<text>分享</text>
					</button>
					<view class="score-share-box">
						<view class="iconfont icon-jietu">
						</view>
						<text>截图</text>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import { parseTime } from '@/utils/tools'
export default {
	data() {
		return {
			parseTime,
			type: '',
			score: 0,
			total: 0,
			correct: 0,
			wrong: 0,
			id: '',
			duration: '00:00:00',
			passRate: 0,
			opts: {
				canvas2d: false,
				background: '#FFFFFF',
				color: ['#E23321', '#E23321'],
				series: {
					show: false,
					color: '#000000'
				},
				title: {
					name: '',
					color: '#000000',
					fontSize: 25
				},
				subtitle: {
					name: '',
					color: '#666666',
					fontSize: 14
				},
				extra: {
					arcbar: {
						startAngle: 1,
						endAngle: 0,
						width: 20,
						lineCap: 'round',
						backgroundColor: '#E5E5E5',
						linearType: 'linear',
						customColor: ['#000000', '#000000']

					}
				},
				animation: true,
			},
			chartData: {
				series: [{
					name: "得分",
					data: 0,
					format: () => ''
				}]
			}
		}
	},
	computed: {
		// 计算正确率
		correctRate() {
			const total = this.correct + this.wrong
			return total > 0 ? parseInt(this.correct / total * 100) : 0
		},

		scoreMessage() {
			// 根据分数和正确率综合判断
			if (this.type == 1) {
				// 练习模式下只看正确率
				if (this.correctRate >= 90) return '恭喜你，正确率遥遥领先！'
				if (this.correctRate >= 80) return '继续加油，离成功不远了！'
				if (this.correctRate >= 60) return '还需要更多练习哦！'
				return '要加倍努力了！'
			} else {
				if(this.mode==2){
					if (this.score >= 8 && this.correctRate >= 10) return '恭喜你，考试成绩优秀！'
				if (this.score >= 7 && this.correctRate >= 8) return '考试通过，继续加油！'
				if (this.score >= 6) return '成绩一般，需要更多练习！'
				return '本次考试未通过，要加倍努力了！'
				}else{
					if (this.score >= 90 && this.correctRate >= 90) return '恭喜你，考试成绩优秀！'
				if (this.score >= 85 && this.correctRate >= 80) return '考试通过，继续加油！'
				if (this.score >= 60) return '成绩一般，需要更多练习！'
				return '本次考试未通过，要加倍努力了！'
				}
				// 考试模式下综合考虑分数和正确率
			
			}
		},
		getChartOpts() {
			const baseOpts = { ...this.opts }
			// 根据模式选择不同的判断标准
			const threshold = this.type == 1 ? this.correctRate : this.score
			console.log(threshold, 'threshold');
			
			if (threshold < 80) {
				baseOpts.color = ['#E23321', '#E23321']
			} else {
				baseOpts.color = ['#2386FF', '#2386FF']
			}
			return baseOpts
		}
	},
	onLoad(options) {	
		this.opc = options.opc
		this.examScore = uni.getStorageSync('examScore')
		this.type = options.type   // 1练习 4模拟考试
		this.id = options.id
		this.mode = options.mode
		// 获取路由参数
		this.duration = this.examScore.endTime
		this.total = parseInt(this.examScore.total) || 0
		this.correct = parseInt(this.examScore.correct) || 0
		this.wrong = parseInt(this.examScore.wrong) || 0
		this.answered = parseInt(this.examScore.answered) || 0
		this.score = this.type == 1 ? parseInt(this.correct / (this.correct + this.wrong) * 100) || 0 : parseInt(this.examScore.correct) || 0
		
		// 更新图表数据
		this.passRate = parseInt(this.correct / (this.correct + this.wrong) * 100)
		if(this.mode == 2){
			this.chartData.series[0].data = this.correct / this.total
		}else{
			this.chartData.series[0].data = this.type == 1 ? this.passRate/100 : this.score / this.wrong /100
		}
		console.log(this.passRate,this.type, this.chartData.series[0].data, '177');
		
	},
	methods: {
		goToReview() {
			let opcData = uni.getStorageSync('opcData')
			// return
			if (this.type == 2) {
				uni.redirectTo({ url: '/pages/question/questionList?id=' + this.id + '&type=5&mode=2&opc=' + this.opc + '&opcname=' + opcData.opcname+'&display=true' })
			}
			if (this.type == 1) {
				let date = this.parseTime(new Date().getTime(), '{y}-{m}-{d}')
				uni.redirectTo({ url: '/pages/question/questionList?type=3&opc=' + this.opc + '&date=' + date })
			}
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	height: 100%;
}

.score {
	background: $uni-gradient-primary;
	height: 100%;
}

.score-box {
	margin: 130rpx 35rpx 0 35rpx;
	background: #fff;
	box-shadow: 1rpx 2rpx 20rpx 1rpx rgba(97, 69, 65, 0.1);
	position: relative;
	border-radius: 20rpx 20rpx 0 0;
	padding-bottom: 40rpx;

	.round {
		width: 300rpx;
		height: 300rpx;
		border: 30rpx solid #fff;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		top: -100rpx;
		transform: translate(-50%, 0);
		background: #fff;
	}

	.progress-2 {
		background-color: #f00;
		width: 250rpx;
		height: 250rpx;
	}

	.progress {
		position: relative;
		width: 100%;
		height: 350rpx;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		overflow: visible;

		.progress-circle {
			width: 700rpx;
			height: 350rpx;
			position: relative;
			z-index: 2;
			transform: translateY(-80rpx);
		}
	}
}

.progress-bg {
	width: 230rpx;
	height: 230rpx;
	border: 35rpx solid #ECECECFF;
	border-radius: 50%;
	position: absolute;
	z-index: 1;
	top: -70rpx;
	left: 189rpx;

	// transform: translate(-50%, 0);
	.progress-i {
		position: absolute;
		height: 175rpx;
		width: 360rpx;
		background: #fff;
		bottom: -65rpx;
		left: -36rpx;
		z-index: -1;
		// display: none;
	}

	&::after {
		content: '';
		position: absolute;
		left: -35rpx;
		top: calc(50% + 10rpx);
		transform: translate(0, -50%);
		// border-radius: 50%;
		border-radius: 0 0 30rpx 30rpx;
		width: 35rpx;
		height: 16rpx;
		background: #ECECECFF;
		z-index: 1;
	}

	&::before {
		content: '';
		position: absolute;
		right: -35rpx;
		top: calc(50% + 10rpx);
		transform: translate(0, -50%);
		// border-radius: 50%;
		border-radius: 0 0 30rpx 30rpx;
		width: 35rpx;
		height: 16rpx;
		background: #ECECECFF;
		z-index: 1;
	}
}

.score-num-box {
	position: absolute;
	left: 50%;
	top: 20rpx;
	transform: translate(-50%, 0);
	z-index: 3;
	width: 100%;
	text-align: center;

	.num {
		font-weight: 700;
		font-size: 70rpx;
		color: #318EFF;
		display: block;
		text-align: center;
	}

	.tips {
		display: block;
		margin-top: 20rpx;
	}

	.time {
		display: block;
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #1E1E20;
		text-align: center;
	}
}

.bingo-list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 60rpx;

	.bingo-item {
		flex: 1;
		text-align: center;
		position: relative;

		&:nth-child(3n) {
			&:before {
				display: none;
			}
		}

		&:before {
			content: '';
			position: absolute;
			right: 0;
			width: 2rpx;
			height: 68rpx;
			background: #d0d0d0;
			top: 20%;
			// transform: translate(0,-50%);
		}

		text {
			font-weight: 400;
			font-size: 26rpx;
			color: #1E1E20;
			display: block;
		}

		.bingo-num {
			font-weight: 700;
			font-size: 40rpx;
			color: #1E1E20;
			margin-bottom: 10rpx;
		}
	}
}

.score-look {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
	margin: 0 30rpx;
	border-radius: 20rpx;
	font-weight: 400;
	font-size: 34rpx;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx 30rpx;
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
		pointer-events: none;
	}

	.score-look-txt {
		position: relative;
		z-index: 2;
		text {
			display: block;
			color: #fff;
		}
	}

	.score-look-btn {
		width: 200rpx;
		height: 90rpx;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
		box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.4);
		font-weight: 700;
		position: relative;
		z-index: 2;
		transition: all 0.3s ease;
		color: #fff;

		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.4);
		}
	}

	.triangle {
		position: absolute;
		width: 130rpx;
		height: 44rpx;
		border-radius: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		background: linear-gradient(135deg, #ff4757 0%, #c44569 100%);
		color: #fff;
		top: -55rpx;
		box-shadow: 0 6rpx 20rpx rgba(255, 71, 87, 0.4);
		z-index: 3;

		&::before {
			content: '';
			position: absolute;
			left: 50%;
			bottom: -12rpx;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-left: 12rpx solid transparent;
			border-right: 12rpx solid transparent;
			border-top: 12rpx solid #c44569;
		}
	}
}

.score-share {
	margin: 30rpx 30rpx;
	border-radius: 20rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 20rpx;
	font-weight: 600;
	font-size: 32rpx;
	color: #fff;

	.score-share-box {
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
		box-shadow: 0 8rpx 24rpx rgba(116, 185, 255, 0.3);
		border-radius: 20rpx;
		padding: 45rpx 0;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
			pointer-events: none;
		}

		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 16rpx rgba(116, 185, 255, 0.3);
		}

		&:nth-child(2) {
			background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
			box-shadow: 0 8rpx 24rpx rgba(162, 155, 254, 0.3);

			&:active {
				box-shadow: 0 4rpx 16rpx rgba(162, 155, 254, 0.3);
			}
		}

		text {
			color: #fff;
			position: relative;
			z-index: 2;
		}
	}

	.iconfont {
		font-weight: 700;
		font-size: 60rpx;
		margin-right: 8rpx;
		color: #fff;
		position: relative;
		z-index: 2;
	}

	.icon-jietu {
		font-size: 54rpx;
	}
}

.low-score {
	background: linear-gradient(135deg, #ff7675 0%, #d63031 100%) !important;

	.num {
		// color: #fff !important;
	}

	.score-look {
		background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
		box-shadow: 0 8rpx 32rpx rgba(253, 121, 168, 0.3);

		.score-look-btn {
			background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
			box-shadow: 0 6rpx 20rpx rgba(253, 203, 110, 0.4);

			&:active {
				box-shadow: 0 4rpx 12rpx rgba(253, 203, 110, 0.4);
			}
		}

		.triangle {
			background: linear-gradient(135deg, #e17055 0%, #d63031 100%);
			box-shadow: 0 6rpx 20rpx rgba(225, 112, 85, 0.4);

			&::before {
				border-top-color: #d63031;
			}
		}
	}

	.score-share {
		.score-share-box {
			background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
			box-shadow: 0 8rpx 24rpx rgba(253, 121, 168, 0.3);

			&:active {
				box-shadow: 0 4rpx 16rpx rgba(253, 121, 168, 0.3);
			}

			&:nth-child(2) {
				background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
				box-shadow: 0 8rpx 24rpx rgba(253, 203, 110, 0.3);

				&:active {
					box-shadow: 0 4rpx 16rpx rgba(253, 203, 110, 0.3);
				}
			}
		}
	}
}



::v-deep button {
	border: none;
	margin: unset;
	line-height: unset;
}
</style>
